<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="setup/view-setup-factory.html">
<link rel="import" href="setup/view-setup-station.html">
<link rel="import" href="setup/view-setup-machine.html">
<link rel="import" href="setup/view-setup-product.html">
<link rel="import" href="setup/view-setup-customer.html">
<link rel="import" href="setup/view-setup-inventory.html">
<link rel="import" href="view-app.html">
<link rel="import" href="style/shared-styles.html">

<dom-module id="view-setup">
  <script>
    /**
     * # Setup
     * `<view-setup>` show the setup pages of factory.
     * @ViewSetup
     * @polymer 
     * @extends {Polymer.Element}
     */
    class ViewSetup extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior],
      Polymer.Element) {
      static get is() {
        return 'view-setup'
      }

      static get template() {
        return Polymer.html`
         <style include="shared-styles">
          :host {
            display: block;
          }
        </style>
        <app-localstorage-document key="app-lang" data="{{language}}"></app-localstorage-document>
        <app-header id="subheader" slot="header" shadow>
          <paper-tabs selected="{{tabs}}" attr-for-selected="name" role="navigation" autoselect noink>
            <template is="dom-repeat" items="[[submenus]]">
              <paper-tab link role="tab" name$="[[item.view]]" disabled="[[item.disable]]">
                <a href="app/setup/[[item.view]]" tabindex="-1">
                  <paper-icon-button icon="[[item.icon]]" alt="[[item.title]]"></paper-icon-button>
                  <span class="tab-title">{{localize(item.title)}}</span>
                </a>
              </paper-tab>
            </template>
          </paper-tabs>
        </app-header>
        <iron-pages selected="[[tabs]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
          <view-setup-factory name="factory"></view-setup-factory>
          <view-setup-machine name="machine"></view-setup-machine>
          <view-setup-station name="station"></view-setup-station>
          <view-setup-product name="product"></view-setup-product>
          <view-setup-customer name="customer"></view-setup-customer>
          <view-setup-inventory name="inventory"></view-setup-inventory>
        </iron-pages>
        `
      }
      static get properties() {
        return {
          route: Object,
          language: String,
          tabs: {
            type: String,
            reflectToAttribute: true,
            value: 'factory',
            observer: '_tabsChanged'
          },
          submenus: {
            type: Array,
            value: () => {
              return [{
                "title": "factory",
                "view": "factory",
                "icon": "vaadin:factory"
              },
              {
                "title": "machine",
                "view": "machine",
                "icon": "vaadin:automation"
              },
              {
                "title": "station",
                "view": "station",
                "icon": "vaadin:viewport"
              },
              {
                "title": "product",
                "view": "product",
                "icon": "vaadin:barcode"
              },
              {
                "title": "customer",
                "view": "customer",
                "icon": "vaadin:clipboard-user"
              },
              {
                "title": "inventory",
                "view": "inventory",
                "icon": "vaadin:stock"
              }
              ]
            }
          }
        }
      }

      _tabsChanged(tabs) {
        const resolvedTabsUrl = this.resolveUrl('setup/view-setup-' + tabs + '.html')
        Polymer.importHref(resolvedTabsUrl, null, null, true)
      }

      connectedCallback() {
        super.connectedCallback()
        this.loadResources(this.resolveUrl('../data/locales.json'))
      }
    }
    window.customElements.define(ViewSetup.is, ViewSetup)
  </script>
</dom-module>